<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="购物车" left-arrow @click-left="$router.go(-1)" />
        </header>
        <div class="content">
            {{ cartList }}
            <van-empty v-if="cartList.length == 0"
                image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                description="描述文字" />
            <van-swipe-cell v-else v-for="item in cartList" :key="item.id">
                <van-card :num="item.count" :price="item.price" :title="item.title" class="goods-card"
                    :thumb="item.image" />
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" />
                </template>
            </van-swipe-cell>

        </div>
    </div>
    <footer class="footer">
        <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checked">全选</van-checkbox>
        </van-submit-bar>
    </footer>
</template>

<script>
import { useCounterStore } from '@/store/index';
import { mapState, mapActions } from 'pinia';
export default {
    computed: {
        ...mapState(useCounterStore, ['cartList'])
    }
}

</script>
<style>
.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}

/* .van-submit-bar {
    bottom: 50px
} */
</style>